<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 快捷入口列表 -->
      <el-col
        v-for="(item, index) in quickEntries"
        :key="index"
        :xs="12" :sm="8" :md="6" :lg="4" :xl="3"
        class="quick-entry-item"
      >
        <el-card shadow="hover" @click.native="handleClick(item)">
          <div class="entry-content">
            <div class="entry-icon">
              <!-- 优先显示获取的网页图标，如果没有则显示默认图标 -->
              <img
                v-if="item.favicon"
                :src="item.favicon"
                class="favicon-img"
                alt="favicon"
              />
              <i v-else :class="item.icon || 'el-icon-link'" style="font-size: 36px;"></i>
            </div>
            <div class="entry-name">{{ item.name }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {fetchFavicon} from "@/api/kiku/favicon";

export default {
  name: "QuickEntry",
  data() {
    return {
      quickEntries: [
        // 示例数据 - 包含外部链接
        {
          name: 'GitHub',
          url: 'https://github.com',
          icon: 'el-icon-star-off' // 默认图标（获取不到favicon时显示）
        },
        {
          name: 'Vue官网',
          url: 'https://vuejs.org',
          icon: 'el-icon-data-board'
        },
        {
          name: '微博',
          url: 'https://weibo.com/u/3669102477',
          icon: 'el-icon-data-board'
        },
        {
          name: '抖音',
          url: 'https://www.douyin.com/user/MS4wLjABAAAACV5Em110SiusElwKlIpUd-MRSi8rBYyg0NfpPrqZmykHY8wLPQ8O4pv3wPL6A-oz?from_tab_name=main',
          icon: 'el-icon-data-board'
        },
        {
          name: '爱奇艺',
          url: 'https://www.iqiyi.com/search/%E9%9E%A0%E5%A9%A7%E7%A5%8E.html',
          icon: 'el-icon-data-board'
        },
        {
          name: '微博无水印视频解析',
          url: 'https://greenvideo.cc/weibo',
          icon: 'el-icon-data-board'
        },
        {
          name: '抖音无水印视频解析',
          url: 'https://greenvideo.cc/douyin',
          icon: 'el-icon-data-board'
        },
        {
          name: '快手无水印视频解析',
          url: 'https://greenvideo.cc/kuaishou',
          icon: 'el-icon-data-board'
        },
        {
          name: '下载狗视频解析工具',
          url: 'https://www.xiazaitool.com/ks',
          icon: 'el-icon-data-board'
        },
        {
          name: '作者抖音首页',
          url: 'https://www.douyin.com/user/MS4wLjABAAAATkBj3s2YyKOUYrHmKthr9zD2gmevejRMki5tE_OuQdl5lCHn5KnbTqynC3uQ46FO?from_tab_name=main',
          icon: 'el-icon-data-board'
        },
        // 可以继续添加更多外部链接...
      ]
    }
  },
  mounted() {
    // 组件挂载后获取所有链接的favicon
    this.fetchAllFavicons();
  },
  methods: {
    // 获取单个网站的favicon
    async fetchFavicon(url) {
      try {
        const domain = new URL(url).hostname;
        // 使用Google的favicon服务（注意：国内可能需要代理）
        //  return `http://localhost:618/api/favicon?url=${url}`;
        // 或者使用自己的后端API（推荐）
        return await fetchFavicon(url);
      } catch (e) {
        console.error('获取favicon失败:', e);
        return null;
      }
    },

    // 批量获取所有favicon
    async fetchAllFavicons() {
      for (let item of this.quickEntries) {
        if (item.url && item.url.startsWith('http')) {
          this.$set(item, 'favicon', await this.fetchFavicon(item.url));
        }
      }
    },

    // 点击跳转（外部链接在新窗口打开）
    handleClick(item) {
      if (!item.url) return;

      if (item.url.startsWith('http')) {
        // 外部链接
        window.open(item.url, '_blank');
      } else {
        // 内部路由
        this.$router.push(item.url);
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.quick-entry-item {
  margin-bottom: 20px;
  text-align: center;
}

.entry-content {
  padding: 10px 0;
  cursor: pointer;
}

.entry-icon {
  margin-bottom: 10px;
  color: #409EFF;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.favicon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.entry-name {
  font-size: 14px;
  color: #606266;
}

.el-card {
  transition: all 0.3s;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
}
</style>
